<template id="Line">
	<div :id="id"  :style="chartStyle">
      <slot></slot> 
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'statusLine',
  data () {
    return {
      myChart: null
    }
  },
  mounted () {
    this.draw()
  },
  watch: {
    xData (newVal, oldVal) {
      this.draw()
    },
    // yData(){
    //   this.draw()
    // },
    seriesData (newVal, oldVal) {
    }
  },
  props: {
    /**
 *@type {string} id 容纳echarts的div的id随机生成，生成一个随机字符串,纯英文的,当不传入ID的时候生成实例,加i确保不会随机到一样的
 */
    id: {
      type: String,
      default: function () {
        let temp = []
        for (let i = 0; i < 6; i++) {
          let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i)
          temp.push(randomChar)
        }
        return temp.reduce((pre, next) => pre + next)
      }
    },
    /**
 *@type {Array} xData x轴数据
 */
    xData: {
      type: Array,
      // require:true,
      default: []
    },
    // yData:{
    //   type:Array,
    //   // required:true,
    //   default:[]
    // },
    /**
 *@type {Array} seriesData 数据填充，形式{name:'',type:'line',data:[]}可多组
 */
    seriesData: {
      type: Array,
      // require:true,
      default: function () {
        return []
      }
    },
    leftspace: {
      type: String,
      // require:true,
      default: '0%'
    },
    rightspace: {
      type: String,
      // require:true,
      default: '20px'
    },
    topspace: {
      type: String,
      // require:true,
      default: '2px'
    },
    bottomspace: {
      type: String,
      default: '0px'
    },
    /**
 *@type {string} chartStyle 样式
 */
    chartStyle: {
      type: String,
      // required:true,
      default: 'width:100%;height:100%;'
    },
    formatter: {
      // require:true,
      default: '<p style="color:#fff;margin-top:11px;margin-left:15px;">{b0}</p><p style="margin-left:10px;margin-right:10px;margin-top:-5px"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" stroke="#2B97EF"stroke-width="2" fill="#2B97EF"/></svg>{a0}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{c0}%&nbsp;</p>'
    },
    toolboxRight: {
      type: String,
      default: '0px'
    },
    toolboxTop: {
      type: String,
      default: '0px'
    },
    itemColor: {
      type: Array,
      default: function () {
        return ['#ef6565', '#a3ecd8']
      }
    },
    showDownloadIcon: {
      type: Boolean,
      default: true
    },
    tooltippadding: {
      default: function () {
        return [0, 0, 0, 0]
      }
    }
  },

  methods: {
    draw () {
      // 绘制图表
      if (!document.getElementById(this.id)) {
        return false
      }
      this.myChart = this.myChart == null ? echarts.init(document.getElementById(this.id)) : this.myChart
      this.myChart.setOption({
        color: this.itemColor,
        // 提示框
        tooltip: {
          padding: this.tooltippadding,
          formatter: this.formatter,
          trigger: 'axis',
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
            fontSize: 12,
            fontFamily: '宋体'
          }
        },
        // 网格
        grid: {
          top: this.topspace,
          left: this.leftspace,
          right: this.rightspace,
          bottom: this.bottomspace,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData,
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: this.seriesData
      })
      this.myChart.resize()
    }
  }
}
</script>

